<template>
  <body>
  <div class="background">
    <img src="static/背景1.jpg" width="100%" height="100%" alt="" />
  </div>
  <el-page-header @back="goBack" content="统计管理" style="margin-top: -2%">
  </el-page-header>
  <div id="chart_example" style="margin-top:7%;">
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        statistics: [{
          money: '',
          date: ''
        },],
        money:[],
        date:[]
      }
    },
    mounted() {
      this.$axios.get('/money/statistics1')
        .then(resp => {
          if (resp.data.data) {
            this.statistics = resp.data.data;
            let i;
            for(i=0;i<5;i++){
              this.money[i]=this.statistics[i].money;
              this.date[i]=this.statistics[i].date;
            }
            let myChart = this.$echarts.init(document.getElementById('chart_example'));
            let option = {
              color: ['#000000'],
              title: {
                left:'center',
                text: '近五个月的销售情况',
                textStyle:{
                  fontSize:32,
                },
              },
              tooltip : {
                trigger: 'axis',
                axisPointer : {
                  type : 'shadow'
                },
                textStyle:{
                  fontSize:18,
                },
              },
              xAxis : [
                {
                  name : '时间/月',
                  type : 'category',
                  data : this.date,
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLabel: {
                    textStyle: {
                      fontSize: 18,
                      color: '#000000'
                    }
                  },
                  nameTextStyle:{
                    fontSize:18,
                    color: '#000000'
                  },
                }
              ],
              yAxis : [
                {
                  name : '金额/元',
                  type : 'value',
                  axisLabel: {
                    textStyle: {
                      fontSize: 18,
                      color: '#000000'
                    }
                  },
                  nameTextStyle:{
                    fontSize:18,
                    color: '#000000'
                  },
                }
              ],
              series : [
                {
                  name:'销售额',
                  type:'bar',
                  barWidth: '60%',
                  data:this.money,
                }
              ]
            };
            myChart.setOption(option);

            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize',function() {myChart.resize()});
          }
        });
    },
    watch: {},
    created() {
    },
    methods:{
      goBack() {
        this.$router.go(-1);
      },
    }
  }
</script>
<style scoped>
  #chart_example{
    width: 50%;
    height: 600px;
    border: 1px solid #0e0d0c;
    margin: 0 auto;
  }
  .background{
    width:100%;
    height:100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }
</style>
